Study Guide [Front-End]

// Arrays
const arr = [1, 2, 3];
arr.push(4);              // add to end — O(1)
arr.pop();                // remove from end — O(1)
arr.shift();              // remove from front — O(n) ⚠️ not O(1) like Python deque
arr.unshift(0);           // add to front — O(n)
arr.slice(1, 3);          // [arr[1], arr[2]] — non-mutating, end-exclusive
arr.splice(1, 2);         // removes 2 elements starting at index 1 — mutates!
arr.length;
arr[arr.length - 1];      // last element (no arr[-1] in JS)
[...arr].reverse();       // reversed copy; arr.reverse() mutates in-place

// Sets — O(1) average membership
const s = new Set([1, 2, 3]);
s.add(4);
s.delete(2);
s.has(3);                 // true
s.size;                   // 3 (not .length)
[...s];                   // convert to array
const unique = [...new Set(arr)];

// Map — ordered, any key type, better than plain objects for algo work
const mp = new Map();
mp.set('a', 1);
mp.get('a');              // 1
mp.has('b');              // false
mp.delete('a');
mp.size;
mp.get('missing');        // undefined — no KeyError
// safe default: mp.get(key) ?? 0

// Plain objects — fine for string/int keys in interviews
const obj = { a: 1, b: 2 };
obj['c'] = 3;
delete obj['a'];
'b' in obj;               // true
Object.keys(obj);         // ['b', 'c']
Object.values(obj);       // [2, 3]
Object.entries(obj);      // [['b',2], ['c',3]]

// for...of — iterates VALUES (use for arrays, sets, maps)
for (const x of arr) { ... }
for (const x of s) { ... }       // Set values
for (const [k, v] of mp) { ... } // Map entries

// for...in — iterates KEYS (avoid for arrays — iterates indices as strings)
for (const key in obj) { ... }   // use only for plain objects

// Index + value (equiv of enumerate)
for (let i = 0; i < arr.length; i++) { ... }
arr.forEach((val, i) => { ... });

// Object iteration
for (const [k, v] of Object.entries(obj)) { ... }

// Map iteration
for (const [k, v] of mp.entries()) { ... }
mp.forEach((val, key) => { ... });

// ── map(callback) ──────────────────────────────────────────────────────────
// callback receives: (currentItem, index, originalArray)
// must RETURN the new value for each item
// result: NEW array, same length as input
const result = array.map((currentItem, index) => {
  return /* transformed version of currentItem */;
});

// one-line arrow: implicit return (no curly braces needed)
const ids = vehicles.map(vehicle => vehicle.id);


// ── filter(callback) ───────────────────────────────────────────────────────
// callback receives: (currentItem, index, originalArray)
// must RETURN true (keep) or false (discard)
// result: NEW array, same length or shorter
const result = array.filter((currentItem, index) => {
  return /* true to keep, false to drop */;
});

// one-line arrow: implicit return
const stopped = vehicles.filter(vehicle => vehicle.stationarySeconds > 300);


// ── reduce(callback, initialValue) ────────────────────────────────────────
// callback receives: (accumulator, currentItem, index, originalArray)
// must RETURN the accumulator — this becomes the input for the next step
// result: ONE value (number, string, object, Map, array — anything)
//
// Two levels of arguments:
//   outer: reduce(callbackFn,  initialValue)
//                 ↑ the whole    ↑ starting
//                   function       value of accumulator
//   inner: (accumulator, currentItem) — parameters INSIDE the callback
const result = array.reduce((accumulator, currentItem) => {
  // update accumulator using currentItem
  return accumulator;  // ALWAYS return it, or next step gets undefined
}, startingValue);

// one-line: implicit return works when it fits
const sum = arr.reduce((accumulator, item) => accumulator + item, 0);

// reduce is great for building a Map — Map is technically "one value"
const byId = vehicles.reduce((accumulator, vehicle) => {
  accumulator.set(vehicle.id, vehicle);
  return accumulator;
}, new Map());

// reduce for frequency count — object is also "one value"
const freq = arr.reduce((accumulator, item) => {
  accumulator[item] = (accumulator[item] ?? 0) + 1;
  return accumulator;
}, {});

// ── map ── transforms every element, returns a NEW array (same length)
const doubled  = arr.map(x => x * 2);
const lengths  = words.map(w => w.length);
const ids      = vehicles.map(v => v.id);

// ── filter ── keeps elements where the test returns true, returns NEW array
const evens    = arr.filter(x => x % 2 === 0);
const stopped  = vehicles.filter(v => v.stationarySeconds > 300);
// does NOT mutate the original array

// ── reduce ── folds the array into a single value (number, object, Map, etc.)
const sum  = arr.reduce((accumulator, x) => accumulator + x, 0);
const freq = arr.reduce((accumulator, x) => {
  accumulator[x] = (accumulator[x] ?? 0) + 1;
  return accumulator;
}, {});
// build a Map with reduce — Map is one object, so reduce is the right tool
const byId = vehicles.reduce((accumulator, v) => {
  accumulator.set(v.id, v);
  return accumulator;
}, new Map());

// ── chaining — the real power; each method returns a new array
// "IDs of vehicles stopped > 5 min, sorted longest-stopped first"
const result = vehicles
  .filter(v => v.stationarySeconds > 300)
  .sort((a, b) => b.stationarySeconds - a.stationarySeconds)
  .map(v => v.id);

// ── forEach ── like map but returns undefined; use when you only want side effects
arr.forEach((val, i) => console.log(i, val));
// don't chain off forEach — it returns nothing

// ── find / findIndex ── return the first match (or undefined / -1)
arr.find(x => x > 3);            // first value matching, or undefined
arr.findIndex(x => x > 3);       // first index matching, or -1
vehicles.find(v => v.id === 42); // lookup by field

// ── some / every ── short-circuit boolean checks
arr.some(x => x > 10);    // true if ANY element matches (like Python any())
arr.every(x => x > 0);    // true if ALL elements match (like Python all())
vehicles.some(v => v.faultCode !== null);  // any vehicle has a fault?

// ── flat / flatMap ── flatten nested arrays
[[1,2],[3,4]].flat();               // [1,2,3,4] — one level
[[[1]],[[2]]].flat(2);              // [1,2] — two levels (or Infinity)
arr.flatMap(x => [x, x * 2]);      // map then flatten one level — more efficient than .map().flat()

// ── Array.from ── create array from iterables or with a fill function
Array.from('hello');               // ['h','e','l','l','o']
Array.from(new Set([1,2,3]));      // [1,2,3]
Array.from({length: 5}, (_, i) => i);  // [0,1,2,3,4] — like range(5)
Array.from({length: m}, () => new Array(n).fill(0)); // 2D grid init

// Two pointers
let l = 0, r = arr.length - 1;
while (l < r) { ... l++; r--; }

// Sliding window
const window = new Map();
let l = 0;
for (let r = 0; r < s.length; r++) {
  window.set(s[r], (window.get(s[r]) ?? 0) + 1);
  while (isInvalid(window)) {
    window.set(s[l], window.get(s[l]) - 1);
    if (window.get(s[l]) === 0) window.delete(s[l]);
    l++;
  }
}

// BFS — graph (array-as-queue; .shift() is O(n) but fine for interviews)
function bfs(graph, start) {
  const queue = [start];
  const visited = new Set([start]);
  while (queue.length) {
    const node = queue.shift();
    for (const nei of (graph.get(node) ?? [])) {
      if (!visited.has(nei)) {
        visited.add(nei);
        queue.push(nei);
      }
    }
  }
}

// BFS — 2D grid
function bfsGrid(grid, startR, startC) {
  const rows = grid.length, cols = grid[0].length;
  const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
  const inBounds = (r, c) => r >= 0 && r < rows && c >= 0 && c < cols;
  const queue = [[startR, startC]];
  const visited = new Set([`${startR},${startC}`]);
  while (queue.length) {
    const [r, c] = queue.shift();
    for (const [dr, dc] of dirs) {
      const nr = r + dr, nc = c + dc;
      const key = `${nr},${nc}`;
      if (inBounds(nr, nc) && !visited.has(key)) {
        visited.add(key);
        queue.push([nr, nc]);
      }
    }
  }
}

// DFS — iterative
const stack = [start];
const visited = new Set([start]);
while (stack.length) {
  const node = stack.pop();
  for (const nei of graph.get(node) ?? []) {
    if (!visited.has(nei)) {
      visited.add(nei);
      stack.push(nei);
    }
  }
}

// DFS — recursive (tree)
function dfs(node) {
  if (!node) return 0;
  const left = dfs(node.left);
  const right = dfs(node.right);
  return 1 + Math.max(left, right);
}

// Binary search
function binarySearch(arr, target) {
  let lo = 0, hi = arr.length - 1;
  while (lo <= hi) {
    const mid = Math.floor((lo + hi) / 2);
    if (arr[mid] === target) return mid;
    else if (arr[mid] < target) lo = mid + 1;
    else hi = mid - 1;
  }
  return -1;
}

// 1. == vs === — ALWAYS use ===
0 == false   // true  — type coercion
0 === false  // false — strict, no coercion
'' == false  // true
null == undefined  // true
null === undefined // false
// Rule: use === everywhere; the only exception is null checks:
if (x == null) { ... } // catches both null and undefined — intentional shortcut

// 2. Reference equality — objects and arrays compare by REFERENCE
[1,2,3] === [1,2,3]  // false — different objects in memory
{a:1} === {a:1}      // false
// Deep equality — no built-in; options:
JSON.stringify(a) === JSON.stringify(b)  // works for simple objects, fragile for undefined/functions
// In interviews: manually compare fields, or note you'd use _.isEqual(a, b)

// 3. Sort without comparator is LEXICOGRAPHIC — even for numbers
[10, 9, 2].sort()                 // [10, 2, 9] — "10" < "2" alphabetically
[10, 9, 2].sort((a, b) => a - b) // [2, 9, 10]

// 4. Falsy values — all of these are falsy in JS
false, 0, -0, 0n, "", '', ``, null, undefined, NaN
// Note: empty array [] and empty object {} are TRUTHY
if ([]) console.log('truthy')   // prints — unlike Python where [] is falsy

// 5. NaN is not equal to itself
NaN === NaN  // false
Number.isNaN(NaN)  // true — use this to check

// 6. null vs undefined
// null   — intentional absence (you set it)
// undefined — variable declared but not assigned, or missing property
typeof null       // "object" — famous JS bug
typeof undefined  // "undefined"
Array.isArray([]) // true — use this, not typeof (which returns "object" for arrays)

// 7. Type coercion with +
"5" + 3   // "53" — string concatenation wins
"5" - 3   // 2   — arithmetic (- forces numeric)
+"5"      // 5   — unary + converts to number
Number("5") // 5
parseInt("5px") // 5  — stops at non-numeric

// 8. var vs let vs const
// var   — function-scoped, hoisted, can redeclare — avoid
// let   — block-scoped, can reassign
// const — block-scoped, cannot reassign binding (but object contents are mutable)
const arr = [1, 2, 3];
arr.push(4);    // ok — mutating contents
arr = [5];      // TypeError — can't reassign the binding

// 9. Array .shift() is O(n) — use index pointer for performance-critical code
// For interview BFS, .shift() is fine; just mention this tradeoff if asked
let head = 0;
while (head < queue.length) {
  const node = queue[head++]; // O(1) dequeue alternative
}

// 10. for...in on arrays — iterates string indices, not values; avoid
for (const i in [10, 20]) console.log(i);  // "0", "1" — strings!
for (const x of [10, 20]) console.log(x);  // 10, 20